<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <th:block th:include="include::header"/>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search">
                                <i class="layui-icon">&#xe615;</i>
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" th:onclick="|xadmin.open('添加用户','@{/user/add}',600,400)|"><i
                            class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-hide" id="userTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData"> 获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll"> 验证是否全选</button>
    </div>
</script>

<script>
    var tableIns;

    layui.use(['table','form'], function () {
        var table = layui.table;
        var form = layui.form;

        tableIns = table.render({
            elem: '#userTable',
            url: '/user/list',
            method: "post",
            cols: [
                [
                    {field: 'id', width: 80, title: 'ID', sort: true},
                    {field: 'username', width: 80, title: '用户名'},
                    {field: 'password', width: 80, title: '密码'},
                    {field: 'nickname', title: '昵称'},
                    {
                        field: 'action', title: '操作', templet(d) {
                            // 反引号 ，在里面写字符串可以换行
                            //          取变量， ${}
                            // var editUrl = ctx + "/user/edit?id="+d.id;
                            var editUrl = `${ctx}/user/edit?id=${d.id}`;

                            return `
                                <div class="td-manage">
                                      <a onclick="member_stop(this,'10001')" href="javascript:;"  title="启用">
                                        <i class="layui-icon">&#xe601;</i>
                                      </a>
                                      <a title="编辑"  onclick="xadmin.open('编辑','${editUrl}',600,400)" href="javascript:;">
                                        <i class="layui-icon">&#xe642;</i>
                                      </a>
                                      <a onclick="xadmin.open('修改密码','member-password.html',600,400)" title="修改密码" href="javascript:;">
                                        <i class="layui-icon">&#xe631;</i>
                                      </a>
                                      <a title="删除" onclick="userDel(${d.id})" href="javascript:;">
                                        <i class="layui-icon">&#xe640;</i>
                                      </a>
                                </div>
                            `
                        }
                    },
                ]
            ],
            page: true,
            parseData(res) {
                return {
                    "code": res.success ? 0 : 500,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.list
                }
            }
        });
//监听提交
        form.on('submit(search)',
            function (data) {
                tableIns.reload({
                    where: {
                        username: data.field.username
                    },
                    page: {
                        curr: 1
                    }
                })
                return false;
            });

    });

    function userDel(id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                url: ctx + '/user/delete/' + id,
                type: 'delete',
                success(res) {
                    if (res.success) {
                        layer.msg("删除成功");
                        setTimeout(function () {
                            tableIns.reload();
                        }, 500);
                    }
                }
            })
        });


    }

</script>

</html>